<template>
    <!--
        vue 中通过给标签绑定一个 ref 属性, 可以帮助我们 简便的获取到对应标签
        将来我们可以通过 this.$refs 获取到标签
    -->
    <h1 ref="myh1">我是 APP 组件</h1>

    <!--
        组件也是一个标签, 所以也可以通过 ref 获取
        但是获取到的是组件的实例对象, 内部包含这个组件的方法和数据
    -->
    <child1 ref="myChild1" />
    <child2 ref="myChild2" />

    <button @click="clickBtn">点击获取标签</button>
</template>

<script>
import child1 from "./components/child1.vue";
import child2 from "./components/child2.vue";
export default {
    methods: {
        clickBtn() {
            // console.log('此时应该获取标签', this.$refs)
            // console.log(this.$refs.myh1.innerHTML)

            // console.log(this.$refs.myChild1.msg);
            // this.$refs.myChild2.getChild2()
        },
    },
    components: {
        child1,
        child2,
    },
};
</script>

<style></style>
